<ng-container *ngIf="!show10YearsPanel">
  <div class="lv-date-picker-header">
    <div class="left">
      <i
        lv-icon="lv-icon-arrow-double-prev"
        lvColorState="true"
        [lvDisabled]="lvCalendarYearOperate?.disableChange"
        (click)="addYear(-10)"
      ></i>
    </div>
    <div class="center">
      <ng-container *ngIf="!lvPanelTitleReadonly || !lvCalendarYearOperate?.disableChange">
        <span (click)="show10YearsPanel = true">{{ activeDateYearRange }}</span>
      </ng-container>
      <ng-container *ngIf="lvPanelTitleReadonly || lvCalendarYearOperate?.disableChange">
        <span class="readonly">{{ activeDateYearRange }}</span>
      </ng-container>
    </div>
    <div class="right">
      <i lv-icon="lv-icon-arrow-double-next" lvColorState="true" [lvDisabled]="lvCalendarYearOperate?.disableChange" (click)="addYear(10)"></i>
    </div>
  </div>
  <div class="lv-date-picker-body">
    <div class="lv-date-picker-year-list" [ngClass]="lvPickerMode == 'year' ? 'lv-date-picker-year-list-independent' : ''">
      <ul>
        <ng-container *ngFor="let C_year of C_years; trackBy: trackByIndex">
          <li *ngIf="lvOnlyShowActiveCell && (C_year.isLast10Years || C_year.isNext10Years)" [ngClass]="C_year.classMap">
            <span class="lv-date-picker-year-cell-hide"></span>
          </li>
          <li *ngIf="!(lvOnlyShowActiveCell && (C_year.isLast10Years || C_year.isNext10Years))" [ngClass]="C_year.classMap">
            <span *ngIf="lvCalendarYearCell === null" class="lv-date-picker-year-cell" (click)="selectCalendarYearCell(C_year)">{{
              C_year.content
            }}</span>

            <span *ngIf="lvCalendarYearCell !== null" (click)="selectCalendarYearCell(C_year)">
              <ng-container *ngTemplateOutlet="lvCalendarYearCell; context: { $implicit: C_year }"></ng-container>
            </span>
          </li>
        </ng-container>
      </ul>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="show10YearsPanel">
  <lv-date-picker-10year
    [lvActiveDate]="activeDate"
    [value]="value"
    [lvOnlyShowActiveCell]="lvOnlyShowActiveCell"
    (valueChange)="tenYearsChange($event)"
    [lvDisabledDate]="lvDisabledDate"
  ></lv-date-picker-10year>
</ng-container>
